<template>
  <div class="boss">
    <div class="box">
      <header>UNI-ADMIN</header>
      <div class="content">
        <Form ref="form" :showlabel="false" :lw="0" :opts="opts" v-model="model"> </Form>
        <el-button @click="confirm" :loading="queryloading">立即登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {glodalMixins} from "uti/mixins";
import { LoginUser } from "api/users"
export default {
  name: "login",
  mixmins:[glodalMixins],
  data() {
    return {
      /**
       * 登录模型
       */
      model: {},
      /*
       * 表单配置项
       */
      opts: {
        username: {
          ph: "请输入用户名",
          title: "用户名",
          required: true,
          max: 5,
          rules: [{ min: 2 }],
        },
        password: {
          ph: "请输入密码",
          title: "密码",
          required: true,
          type: "password",
          max: 10,
          width: "100%",
          rules: [{ min: 2 }],
        },
      },
    };
  },
  methods: {
    /**
     * 提交登录
     */
    async confirm() {
      try {
        await this.$refs.form.validate();
        this.queryloading = true;
        const user = await LoginUser(this.model);
        this.$store.commit('setUser',user);
        this.$router.push({name:"HomeLayouts"});
      } catch (error) {}
      this.queryloading = false;
    },
  },
};


</script>

<style lang="scss" scoped>
.boss {
  height: 100%;
  background: #fff;
  .box {
    width: 445px;
    height: 286px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    margin: auto;
    margin-top: 100px;
    header {
      color: #6c757d;
      height: 58px;
      padding: 0.75rem 1.25rem;
      box-sizing: border-box;
      font-size: 28px;
      font-weight: 500;
      background-color: rgba(0, 0, 0, 0.03);
      border-bottom: 1px solid rgba(0, 0, 0, 0.125);
      display: flex;
      justify-content: center;
      align-content: center;
    }
    .content {
      flex: 1;
      box-sizing: border-box;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .el-button {
        width: 100%;
        color: #fff;
        background-color: teal;
      }
    }
  }
}
</style>